<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
	<title>用户注册</title>
	<link rel="stylesheet" th:href="@{/weixin/css/weui.min.css}" />
	<link rel="stylesheet" href="../../static/weixin/css/common.css" th:href="@{/weixin/css/common.css}" />
	<script type="text/javascript" th:src="@{/weixin/js/zepto.min.js}"></script>
	<script type="text/javascript" src="../../static/weixin/js/weui.min.js" th:src="@{/weixin/js/weui.min.js}"></script>
	<script type="text/javascript" src="../../static/weixin/js/fastclick.min.js" th:src="@{/weixin/js/fastclick.min.js}"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" th:src="@{/weixin/js/jweixin-1.0.0.js}"></script>
	<style type="text/css">
	button.weui-vcode-btn {
		background-color: transparent;
		border-top: 0;
		border-right: 0;
		border-bottom: 0;
		outline: 0;
	}
	</style>
</head>

<body>
 <div class="container" id="container">
	<!-- Main content -->
	<div class="page">
		<div class="page__bd">
	      <form id="form" method="post" >
	      	<input name="type" type="hidden" value="0" />
	      	<input id="latitude" name="latitude" type="hidden" />
	      	<input id="longitude" name="longitude" type="hidden" />
	        <div class="weui-cells__title">姓名</div>
	      	<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<input class="weui-input" id="name" name="name" required="" maxlength="10" type="text" emptytips="请输入姓名" placeholder="请输入姓名"></input>
					</div>
					<div class="weui-cell__ft">
						<i class="weui-icon-warn"></i>
					</div>
				</div>
			</div>
			
		   <div class="weui-cells__title">性别</div>
	        <div class="weui-cells weui-cells_radio">
	            <label class="weui-cell weui-check__label" for="x11">
	                <div class="weui-cell__bd">
	                    <p>男</p>
	                </div>
	                <div class="weui-cell__ft">
	                    <input type="radio" class="weui-check" value="男" name="sex" id="x11" checked="checked"/>
	                    <span class="weui-icon-checked"></span>
	                </div>
	            </label>
	            <label class="weui-cell weui-check__label" for="x12">
	                <div class="weui-cell__bd">
	                    <p>女</p>
	                </div>
	                <div class="weui-cell__ft">
	                    <input type="radio" name="sex" class="weui-check" value="女" id="x12"/>
	                    <span class="weui-icon-checked"></span>
	                </div>
	            </label>
	        </div>

			<div class="weui-cells__title">社交帐号</div>
	      	<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__hd">
	                    <label class="weui-label">QQ</label>
	                </div>
					<div class="weui-cell__bd">
						<input class="weui-input" id="qq" name="qq" type="text" placeholder="请输入QQ" />
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
	                    <label class="weui-label">微信</label>
	                </div>
					<div class="weui-cell__bd">
						<input class="weui-input" id="weixin" name="weixin" type="text" placeholder="请输入微信" />
					</div>
				</div>
			</div>
			<div class="weui-cells__tips">QQ和微信至少填一个</div>
			
			<div class="weui-cells__title">邮箱</div>
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<input class="weui-input" id="email" name="email" type="email" required="" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
								maxlength="50" emptytips="请输入邮箱" placeholder="请输入邮箱" notmatchtips="请输入正确的邮箱" />
					</div>
				</div>
			</div>
			
	   		<div class="weui-cells__title">手机号</div>
	      	<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<input class="weui-input" id="mobile" name="mobile" type="tel" required="" pattern="^\d{11}$" maxlength="11" placeholder="输入你现在的手机号" emptytips="请输入手机号"
							notmatchtips="请输入正确的手机号"></input>
					</div>
					<div class="weui-cell__ft">
                    	<span id="code" class="weui-vcode-btn">获取验证码</span>
                	</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<input class="weui-input" name="verifyCode" type="text" placeholder="请输入验证码" required="" pattern="^[0-9]{6}$"
									emptytips="请输入验证码" notmatchtips="验证码为6为数字" />
					</div>
				</div>
			</div>
			
			<div class="weui-cells__title">密码</div>
	      	<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<input class="weui-input" required="" pattern="^[a-zA-Z0-9]{6,10}$" id="password" name="password" type="password" emptytips="请输入密码" placeholder="请输入密码"
							notmatchtips="密码为6至10位的数字或字母" />
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<input class="weui-input" id="repeatPwd" type="password" placeholder="请再次输入密码" required="" emptytips="请再次输入密码" />
					</div>
				</div>
				
			</div>
			
			<div class="weui-cells__title">城市</div>
	      	<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
                    <select class="weui-select" name="city">
                   		<option value=""></option>
						<option th:each="city:${cities}"
								th:value="${city.value}"
								th:text="${city.name}"></option>
                    </select>
				</div>
			</div>
			
			<div class="weui-cells__title">行业</div>
	      	<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
                    <select class="weui-select" name="major">
                   		<option value=""></option>
						<option th:each="major:${majors}"
								th:value="${major.value}"
								th:text="${major.name}"></option>
                    </select>
				</div>
			</div>

			<div class="weui-btn-area">
				<input type="button" id="submit" class="weui-btn weui-btn_primary" value="确定" />
			</div>
		</form>
		</div>
	</div>
</div>
	<script th:inline="javascript">
		var jsconfig = /*[[${config}]]*/ null;
		var appid = /*[[${appid}]]*/ null;

		$(function(){
			wx.config({
				appId: appid, 
				timestamp: jsconfig["timestamp"], 
				nonceStr: jsconfig["noncestr"], 
				signature: jsconfig["signature"],
				jsApiList: ["getLocation"]
			});

			wx.ready(function(){
			  wx.checkJsApi({
			    jsApiList: [
			      'getLocation'
			    ],
				success: function (res) {
					wx.getLocation({
					    type: 'wgs84',
					    success: function (res) {
					        $("#latitude").val(res.latitude); // 纬度，浮点数，范围为90 ~ -90
					        $("#longitude").val(res.longitude); // 经度，浮点数，范围为180 ~ -180。
					    }
					});
				}
			 });
			});
    	});
		
		$("#code").click(function() {
			if(!(/^1[34578]\d{9}$/.test($("#mobile").val()))){ 
		        weui.topTips("请输入正确的手机号码");  
		        return false; 
		    }

			var l = weui.loading("正在提交")
			$.get("/mall/sms/code?mobile=" + $("#mobile").val(), function(data) {
                l.hide();
			    if (data.code != 1){
                    weui.alert(data.msg);
                    return;
                }

				weui.alert("获取验证码成功，60秒后重新获取");
				$("#code").hide();
				setTimeout("$('#code').show()", 60000);
			})
		});
		
	</script>
	<script th:inline="javascript">
	var contextPath = /*[[@{/}]]*/ null;

	$(function() {
		$("#submit").click(function() {
			weui.form.validate("#form", function(error) {
				if (error || validate())
					return;

				var l = weui.loading("正在提交");
				$.ajax({
					cache : true,
					type : "POST",
					url : "/mall/weixin/mall/register",
					data : $('#form').serialize(),
					error : function(request) {
						l.hide();
						weui.alert("Connection error");
					},
					success : function(data) {
                        l.hide();
                        if (data.code == 1){
                            if (!data.redirectUrl) {
                                window.location.href = contextPath + "weixin/mall/registerSuccess";
                            } else {
                                window.location.href = data.redirectUrl;
                            }
                        } else{
                            weui.alert(data.msg);
                        }
					}
				});
			})
		})
	});

	function validate() {
		if ($("#password").val() != $("#repeatPwd").val()) {
			weui.topTips("两次密码不一致");
			return true;
		}

        if (!($("#qq").val() != '' || $("#weixin").val() != '')) {
            weui.topTips("QQ和微信至少填一个");
            return true;
        }

		return false;
	}
	</script>

</body>
</html>
